<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div#box {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        div#message {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        
        $(function(){
                    $('#box').bind('click',function(event){
                        alert("这是外层dvi")
                        event.stopPropagation(); //阻止事件冒泡的方法
                    })

                    $('#message').bind('click',function(event){
                        alert("这是里层dvi")
                        event.stopPropagation(); //阻止事件冒泡的方法
                    })

                    $('body').bind('click',function(event){
                        alert("这是body")
                        event.stopPropagation(); //阻止事件冒泡的方法
                    })

        })



    </script>
</head>
<body>
    <!-- 事件的冒泡 -->
    <!-- 点击子节点，会向上出发节点 -->
    <div id="box">
              这是一个外层div

        <div id="message">

                这是一个内层div <div></div>
        </div>
    </div>
    
</body>
</html>
